<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-11-01 09:33:17
 * @LastEditors: wei_jt@ecidi.com
 * @LastEditTime: 2022-04-11 14:00:26
 * @Description: 主入口，布局
 -->
<template>
  <app-main id="fks-app" />
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import * as types from '@/store/Getter/getterTypes'
import { developerMode, developerPwd } from '@/config'
import { isMobile } from '@/utils/util'
import Mix from '@/mixins/module'
import AppMain from '@/layout'
import { updateStyle } from '@/utils/theme/index'
import { hideWatermark } from '@/utils/watermark'
import { clickEvent, scroll } from '@/utils/monitor'
export default {
  name: 'Global',
  components: { AppMain },
  mixins: [Mix],
  data() {
    return {}
  },

  computed: {
    ...mapGetters([
      types.THEME,
      types.WEBSITE_TEXT,
      types.WEBSITE_LOGO,
      types.STRIPE,
      types.DEVELOPER_FLAG
    ])
  },
  watch: {
    //跳转到登录页取消水印
    $route: {
      immediate: true,
      handler: function (val) {
        if (val.name == 'login' || val.name == '404') hideWatermark()
      }
    },
    //logo变换
    websiteLogo: {
      immediate: true,
      handler: function (val) {
        document.getElementById('titleIcon').href = val
      }
    },
    //站名变换
    websiteText: {
      immediate: true,
      handler: function (val) {
        document.title = val
      }
    },
    //斑马纹
    stripe: {
      immediate: true,
      handler: function (val) {
        this.$fawkes.stripe = val
      }
    },
    theme: {
      immediate: true,
      handler: function (ntheme, otheme) {
        // 排除子应用干扰
        if (this.$InQianKun) {
          return false
        }
        document.documentElement.style.setProperty('--theme-color', ntheme)
        ntheme !== otheme && updateStyle(ntheme, otheme)
      }
    }
  },
  mounted() {
    // 排除子应用干扰
    if (this.$InQianKun) {
      return false
    }
    if (isMobile()) {
      document.body.classList.add('mobile')
    } else {
      document.body.classList.remove('mobile')
    }
    window.addEventListener('click', clickEvent, true)
    window.addEventListener('scroll', scroll, true)
    if (developerMode) {
      this.listenClick()
    }
  },
  methods: {
    listenClick() {
      let func = () => {
        let num = 0
        let timer = null
        return (e) => {
          if (!developerMode || (developerMode && this.developerFlag))
            return false
          if (window.innerWidth - e.x < 200 && window.innerHeight - e.y < 60) {
            timer && clearTimeout(timer)
            timer = setTimeout(() => {
              num = 0
            }, 3000)
            num++
            if (num >= 15) {
              num = 0
              this.developerModeVerification()
            }
          }
        }
      }
      let clickFunc = func()
      document.addEventListener('click', clickFunc)
      this.$once('hook:beforeDestory', () => {
        document.removeEventListener('click', clickFunc)
      })
    },
    //进入开发者模式验证密码
    developerModeVerification() {
      this.$prompt('', this.LANG.INTER_DEVELOPERMODE_PWD, {
        confirmButtonText: this.LANG.CONFIRM,
        cancelButtonText: this.LANG.CANCEL,
        closeOnClickModal: false,
        customClass: 'developerMode',
        inputValidator: function (val) {
          if (val) {
            return true
          } else {
            return false
          }
        },
        inputErrorMessage: this.LANG.ACCOUNT_PWD
      })
        .then(({ value }) => {
          if (value == developerPwd) {
            this.$store.commit('setDeveloperFlag', 1)
          } else {
            this.$message.error(this.LANG.PASSWORD_ERROR)
          }
        })
        .catch(() => {})
    }
  }
}
</script>

